<template>
  <div class="container">
    <div class="u-title f-mtp10">
      <h2>当前部门：{{departmentName}}</h2>
    </div>
    <div class='u-content f-oh mn'>
        <el-checkbox-group v-model="checkedPermission" @change="handleCheckedPermissionChange">
          <el-checkbox class='check-item' border v-for="(item, index) in permissionList" :label="item.id" :key="index">{{item.name}}</el-checkbox>
        </el-checkbox-group>
        <el-button class='submit' @click="submit" type="primary">设置</el-button>
        <!-- <section v-for="(item, index) in configList" :key="index">
            <div class="u-title f-mtp10">
                <h2>{{item.name}}</h2>
            </div>
            <ul class='u-content flex flex-wrap'>
                <li v-for="(i, idx) in item.subpurviewList" :key="idx" class='lawyer-item f-w200 br-rt'>{{i.des}}</li>
            </ul>
        </section> -->
    </div>
  </div>
</template>

<script>
// import axios from 'axios';
export default {
  name: 'PermissionSettings',
  data() {
    return {
      checkedPermission: [],
      permissionList: [],
      departmentName: '',
      permissionId: null,
      value4: true,
      phone: '',
      password: '',
      configList: []
    }
  },
  created() {
    console.log('this.$route', this.$route);
    this.permissionId = this.$route.params.id;
    this.getConfigList();
  },
  methods: {
    // 修改按钮点击事件
    submit() {
      const list = this.configList;
      const arr = [];
      for(let i = 0; i < list.length; i++) {
        if(this.checkedPermission.indexOf(list[i].id) != -1) {
          arr.push.apply(arr, list[i].subpurviewList);
        }
      }
       console.log('arr::', arr);
      if(arr.length == 0) {
        this.updatePermission('');
      } 
      if(arr.length > 0) {
        const arrList = [];
        for(let j = 0; j < arr.length; j++) {
          arrList.push(arr[j].id);
        }
        console.log('arrList::', arrList);
        const subPurviews = arrList.join(',');
        
        this.updatePermission(subPurviews);
      }
      console.log('arr::', arr);
      console.log('this.checkedPermission:::', this.checkedPermission);
    },
    updatePermission(subPurviews) {
      console.log('subPurviews::', subPurviews);
      this.$store.dispatch('UPDATE_DEPARTMENT', {
        id: this.permissionId,
        subPurviews,
      }).then(res => {
        if(res.data.retCode == 0) {
          console.log('res;;::', res);
          this.$message.success('设置成功！');
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    handleCheckedPermissionChange(arr) {
      console.log('e:::', arr);
      console.log('checkedPermission::', this.checkedPermission);
    },
    getConfigList() {
      this.$store.dispatch('GET_PERMISSION_CONFIG_LIST', {
        permissionId: this.permissionId
      }).then(res => {
        if(res.data.retCode == 0) {
          const list = res.data.data.purviewList;
          const arr = [];
          for(let i = 0; i < list.length; i++) {
            if(list[i].own == 1) {
              arr.push(list[i].id);
            }
          }
          this.checkedPermission = arr;
          console.log('checkedPermission::', this.checkedPermission);
          this.configList = list;
          this.permissionList = list;
          this.departmentName = res.data.data.name;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.check-item{
  margin: 10px !important;
  width: 200px;
}
.submit{
  width: 300px;
  display: block;
  margin: 40px auto 40px auto;
}
.mn{
    padding: 10px 20px;
}
.lawyer-item{
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #ebeef5;
}
.br-lf{ border-left: 1px solid #ebeef5;}
.br-rt{ border-right: 1px solid #ebeef5;}
.br-tp{ border-top: 1px solid #ebeef5;}
.br-bt{ border-bottom: 1px solid #ebeef5;}
</style>
